<template>
  <NavTitle title="缓存目录" />
  <Table ref="tableRef" :columns="columns" :data="loadData" :alert="false" bordered :showPagination="false">
    <template #operator>
      <div class="table-button" v-if="!isView">
        <a-button type="primary" @click="addCacheDirectory">
          <SvgIcon class="iconDef" :name="'addPush'" :color="'#fff'" width="16" height="16" />
          添加缓存目录
        </a-button>

        <a-button type="primary" ghost @click="cleanDataList" v-if="!isView">
          <SvgIcon class="iconDef" :name="'delete'" :color="'#2590FF'" width="16" height="16" />
          清理缓存
        </a-button>
      </div>
    </template>
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.dataIndex === 'isOpen'">
        <a-switch
          v-model:checked="record.isOpen"
          checked-children="开"
          un-checked-children="关"
          :checkedValue="1"
          :unCheckedValue="0"
          :disabled="isView"
        />
      </template>
      <template v-if="column.dataIndex === 'action'">
        <div class="table-operation" v-if="!isView">
          <SvgIcon
            class="iconDef"
            :name="'delete'"
            :color="'#6d85a6'"
            width="16"
            height="16"
            @click="deleteCacheDirectory(record, index)"
          />
        </div>
      </template>
    </template>
  </Table>
  <BasicModal ref="addModal" :title="titleName" width="400px" @emit-callback-fn="addCallbackFn">
    <template #content>
      <schemaForm ref="formRef" />
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
import { useForm } from '@/components/SchemaForm/index';
import { Modal } from 'ant-design-vue';
import { createVNode } from 'vue';
import { usePipelineStore } from '@/store/modules/pipeline';
import { storeToRefs } from 'pinia';
import { cloneDeep } from 'lodash';
import { PipelineOperationTypeCode } from '@/enums/pipelineEnum';
const route = useRoute();
const counterStore = usePipelineStore();
const { cacheSettingList } = storeToRefs(counterStore);
const { setCacheDataData } = counterStore;
const dataObject = ref<any>(cloneDeep(cacheSettingList));
const getCacheData = computed(() => {
  return dataObject.value;
});
const isView = computed(() => route.params.type == PipelineOperationTypeCode.info);
const titleName = ref('');
const addModal = ref<any>(null);
const [schemaForm, formRef] = useForm({
  schemas: [
    {
      field: 'directory',
      label: '缓存目录',
      labelWidth: 80,
      required: true,
      colProps: {
        span: 24,
      },
      component: 'Input',
    },
    {
      field: 'description',
      label: '描述',
      labelWidth: 80,
      required: true,
      colProps: {
        span: 24,
      },
      component: 'InputTextArea',
    },
  ],
});
const columns = [
  { dataIndex: 'directory', title: '缓存目录', align: 'center' },
  { dataIndex: 'description', title: '描述', align: 'center' },
  { dataIndex: 'isOpen', title: '是否开启', align: 'center' },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    fixed: 'right',
    width: 220,
  },
];
const tableList = ref<Pipeline.CacheSetting[]>([]);
const loadData = async () => {
  return tableList.value;
};
enum ModalType {
  add = '添加缓存目录',
  edit = '编辑缓存目录',
}
const addCacheDirectory = () => {
  titleName.value = ModalType.add;
  addModal.value.showModal();
  formRef.resetFields();
};

const addCallbackFn = async () => {
  const data = await formRef.validate();
  if (titleName.value == ModalType.add) {
    tableList.value.push({
      pipelineCode: route.params.code as string, // 流水线编码
      directory: data.directory, // 缓存目录
      description: data.description, // 描述
      isOpen: 0, // 是否开启，1开启0关闭
    });
  }
  addModal.value.hideModal();
};

const deleteCacheDirectory = (record: any, index: number) => {
  Modal.confirm({
    title: '提示',
    icon: '',
    centered: true,
    content: createVNode('div', { style: 'color:black;' }, `确定要删除“缓存目录：${record.directory}”这一项数据吗？`),
    async onOk() {
      tableList.value.splice(index, 1);
      // message.success('删除成功');
    },
    onCancel() {},
    class: 'test',
  });
};

const cleanDataList = () => {
  Modal.confirm({
    title: '提示',
    icon: '',
    centered: true,
    content: createVNode('div', { style: 'color:black;' }, `确定要清理所有缓存吗？`),
    async onOk() {
      tableList.value.splice(0, tableList.value.length);
      // message.success('删除成功');
    },
    onCancel() {},
    class: 'test',
  });
};

watch(
  getCacheData,
  (newVal) => {
    if (newVal.length > 0) {
      dataObject.value = cloneDeep(newVal);
      tableList.value = dataObject.value;
    }
  },
  {
    immediate: true,
  },
);

watch(
  tableList.value,
  (newVal) => {
    if (newVal) {
      setCacheDataData(newVal);
    }
  },
  { deep: true },
);
</script>

<style scoped lang="less">
.table-button {
  margin-top: 16px;
  display: flex;
  button {
    margin: 0 6px;
    display: flex;
    align-items: center;
  }
  .iconDef {
    cursor: pointer;
    margin-right: 8px;
  }
}
</style>
